<template>
  <el-dialog :title="title" :visible="dialogVisible" :before-close="handleClose">
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-position="left"
      label-width="100px"
      label-suffix=":"
      class="form"
    >
      <el-form-item label="选择设备编号" prop="eids">
        <el-checkbox-group v-model="form.eids" :disabled="disableRid">
          <el-checkbox v-for="item in deviceList" :key="item.key" :label="item.key">{{ item.value }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="选择时间段" prop="time">
        <el-time-picker
          is-range
          v-model="form.time"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
          format="HH:mm"
        >
        </el-time-picker>
      </el-form-item>
      <el-form-item label="选择资源" prop="sid">
        <el-radio-group v-model="form.sid">
          <el-radio v-for="item in resourceList" :key="item.id" :label="item.id">{{ item.class }}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="handleClose">返回</el-button>
      <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { configAddApi, configUpdateApi } from '@/api/modules/config'
export default {
  props: {
    isShow: Boolean,
    disableRid: Boolean,
    row: Object,
    deviceList: Array,
    resourceList: Array
  },
  data() {
    return {
      title: '添加配置',
      dialogVisible: false,
      form: {
        eids: [],
        eid: '',
        time: [new Date(), new Date()],
        sid: ''
      },
      rules: {
        eids: [{ required: true, message: '请选择设备编号', trigger: 'blur' }],
        time: [{ required: true, message: '请选择时间段', trigger: 'blur' }],
        sid: [{ required: true, message: '请选择资源', trigger: 'blur' }]
      }
    }
  },
  watch: {
    isShow(val) {
      this.dialogVisible = val
    },
    row(val) {
      for (const key in val) {
        this.form[key] = val[key]
        if (key === 'eid') {
          const eids = val[key].split(',')
          this.form['eids'] = eids
        }
        if (key === 'time') {
          let startTime = new Date()
          const startTimeArr = val['start_time'].split(':')
          startTime.setHours(startTimeArr[0])
          startTime.setMinutes(startTimeArr[1])

          let endTime = new Date()
          const endTimeArr = val['end_time'].split(':')
          endTime.setHours(endTimeArr[0])
          endTime.setMinutes(endTimeArr[1])

          this.form[key] = [startTime, endTime]
        }
      }
    }
  },
  created() {},
  methods: {
    handleClose() {
      this.resetForm('form')
      this.$emit('close')
    },
    submit() {
      this.form.eid = this.form.eids.join(',')
      const startTime = this.form.time[0].getHours() + ':' + this.form.time[0].getMinutes()
      const endTime = this.form.time[1].getHours() + ':' + this.form.time[1].getMinutes()
      this.form.start_time = startTime
      this.form.end_time = endTime
      if (this.row.id && !this.disableRid) {
        configUpdateApi({ ...this.form }).then(res => {
          this.resetForm('form')
          this.$emit('update')
          this.$emit('close')
        })
      } else {
        delete this.form['id']
        configAddApi({ ...this.form }).then(res => {
          this.resetForm('form')
          this.$emit('update')
          this.$emit('close')
        })
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) this.submit()
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
</style>
